/**
 * @function: got cities for selected nation.
 */
function selectCity() {
    // step1. preparing parameters
    var $select = document.getElementById("nation") ;
    var nationId ;
    for (var i=0; i<$select.options.length; i++) {
        if ($select.options[i].selected) {
            nationId = $select.options[i].value ;
            console.log("selected Id: " + nationId) ;
            break ;
        }
    }
    var paramStr = "nationId=" + nationId ;
    /*    $select.options.forEach(function(item, index) {
            if (item.selected) {
                nationId = item.value ;
                console.log("selected : " + nationId) ;
            }
        })*/
    // step2. create XHR object
    var xhr = createXMLHttpRequest() ;

    // step3: through XHR object, a http request could be created and send .
    //  much configuration needs to be done.
    xhr.open(
        // method type
        "GET",
        // url:  NativeAjaxServlet: /test/nativeAjax   -> url: {ContextRoot}/test/nativeAjax.
        // for the data, its transmission depends on POST or GET
        // if it was GET, the data was attached to the URL in forms of , "k1=v1&k2=v2&k3=v3....
        // else, if is was POST, the data should be send by XHR

        "/01_jspBasics/test/newNativeAjax?" + paramStr,
        //asynchrous / synchrous
        true  // in default.
    ) ;

    // step 4. define a callback function.

    xhr.onreadystatechange = function() {

        if (xhr.readyState == 0) {
            console.log("xhr was not yet initialized. ")
        } else if (xhr.readyState == 1) {
            console.log("xhr was initialized and sending the request.") ;

        } else if (xhr.readyState == 2) {
            console.log("the request was sent by xhr.")
        } else if (xhr.readyState == 3) {
            console.log("xhr was receiving data from server ") ;
        } else {
            // the logic for rendering data from server was defined in the following.
            console.log("the data from server side was loaded by xhr.")
            if (xhr.status == 200) {
                var responseText = xhr.responseText;
                console.log(" got response: " + responseText);
                var cities = responseText.split("|");

                var $selectCity = document.getElementById("city");
                // clear options of city select.
                $selectCity.options.length = 0 ;

                cities.forEach(function (item, index) {
                    var $newOption = document.createElement("option");
                    $newOption.innerHTML = item;
                    // append to the $selectCity
                    $selectCity.appendChild($newOption);
                })

            } else {
                alert("处理异常：" + xhr.statusText) ;
            }

        }

    } ;
    // step 5. send the request
    xhr.send() ;
}